<template>
  <view class="faxian">
    <view class="titlesHead">
      <view class="iconfont icon-fangxiang-xiangzuo icon" @tap="yun"></view>
      <view class="titname">
        {{ faList.title }}
      </view>
      <view class="titRight"></view>
    </view>
    <view class="zhanwei">静安阿达</view>
    <view class="zuozhe">
      {{ faList.author }} <br />
      {{ faList.summary }} <br />
      {{ faList.createTime }} <br />
      {{ faList.author }} <br />
    </view>
    <view class="headImg">
      <image :src="faList.coverImg"></image>
    </view>
  </view>
</template>

<script>
import { xiangqing } from "../../../api/faxian/faxian.js";
export default {
  name: "Faxianxiangqing",
  data() {
    return {
      // 接收传过来的id
      faId: "",
      // 数据
      faList: {},
    };
  },
  methods: {
    // 点击箭头返回上一页
    yun() {
      uni.navigateBack({
        delta: 1,
      });
    },
  },
  onLoad(options) {
    console.log(options);
    console.log(this);
    this.faId = options.id;
    xiangqing(this.faId).then((res) => {
      console.log(res);
      this.faList = res.data.data.productArticle;
    });
  },
};
</script>

<style lang="less" scoped>
.faxian {
  background-color: #f4e8ab;
  height: 100vh;
  position: relative;
  // 头部固定位置
  .titlesHead {
    height: 100rpx;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    color: white;
    display: flex;
    align-items: center;
    background-color: #135a05;
    .icon {
      flex: 1;
      padding-left: 50rpx;
      box-sizing: border-box;
    }
    .titname {
      flex: 3;
      text-align: center;
    }
    .titRight {
      flex: 1;
    }
  }
  // 头部固定后面占位置的盒子，不要删除哈
  .zhanwei {
    width: 100%;
    height: 100rpx;
    background-color: #104d04;
  }
  // 文字介绍
  .zuozhe {
    width: 100%;
    height: 200rpx;
    padding: 0 40rpx;
    box-sizing: border-box;
  }
  // 图片
  .headImg {
    width: 100%;
    height: 480rpx;
    padding: 0 40rpx;
    box-sizing: border-box;
    image {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
